<template>
	<view class="mt20">
		<view class="word-break f32">
			<block v-if="reportType === 1">
				{{ titleIndex }}、{{ nowDateStr }}运营数据分析（统计周期为{{
					reportType === 1 ? '前一天' : ''
				}}
				<view>{{ periodStr }}）</view>
			</block>
			<block v-else
				>{{ titleIndex }}、{{ nowDateStr }}运营数据分析（统计周期为{{
					periodStr
				}}</block
			>
		</view>
		<view class="mt20 flex-between" v-if="showHosp">
			<uni-data-select
				:localdata="hospitalList"
				:clear="false"
				@change="chooseHospital"
				:value="chooseHospId"
				class="w420"
			></uni-data-select>
			<image
				:src="showMoreIco"
				class="query-data"
				@tap="openToDayStatic"
				v-if="reportType === 1"
			></image>
		</view>
		<view class="mt20" v-if="dataList && dataList.length">
			<view class="b mt20">{{ nowDateStr }}订单运营情况：</view>
			<view
				class="mt20"
				v-if="
					histogramData1.categories &&
					histogramData1.categories.length
				"
			>
				<qiun-data-charts
					:canvas2d="true"
					canvasId="orderStatic"
					type="column"
					:opts="opts1"
					:chartData="histogramData1"
				></qiun-data-charts>
			</view>
			<view v-else class="mt20">
				<view class="df jsc"
					><imageIcon
						:value="noImg"
						width="600rpx"
						height="500rpx"
					></imageIcon
				></view>
				<view class="tc mt20 g9">{{ staticNoneStr }}</view>
			</view>

			<view class="b mt20">{{ nowDateStr }}订单收入情况：</view>
			<view
				class="mt20"
				v-if="
					histogramData2.categories &&
					histogramData2.categories.length
				"
			>
				<qiun-data-charts
					:canvas2d="true"
					canvasId="orderIncomeStatic"
					type="column"
					:opts="opts2"
					:chartData="histogramData2"
				></qiun-data-charts>
			</view>
			<view v-else class="mt20">
				<view class="df jsc"
					><imageIcon
						:value="noImg"
						width="600rpx"
						height="500rpx"
					></imageIcon
				></view>
				<view class="tc mt20 g9">{{ staticNoneStr }}</view>
			</view>
			<block v-if="reportType === 1">
				<view class="b mt20">{{ nowDateStr }}护工人员情况：</view>
				<view
					class="mt20"
					v-if="
						histogramData3.categories &&
						histogramData3.categories.length
					"
				>
					<qiun-data-charts
						:canvas2d="true"
						canvasId="nursePersonStatic"
						type="column"
						:opts="opts3"
						:chartData="histogramData3"
					></qiun-data-charts>
				</view>
				<view v-else class="mt20">
					<view class="df jsc"
						><imageIcon
							:value="noImg"
							width="600rpx"
							height="500rpx"
						></imageIcon
					></view>
					<view class="tc mt20 g9">{{ staticNoneStr }}</view>
				</view>
			</block>
		</view>
		<diy-empty v-else></diy-empty>
		<uni-popup ref="popupDialog" type="bottom">
			<view class="popup-bd rel">
				<view class="popup-title primary-color"
					>今日实时数据({{ nowDate }})</view
				>
				<view class="popup-content p20">
					<uni-data-select
						:localdata="hospitalList"
						:clear="false"
						@change="chooseTodayHospital"
						:value="choosTodayeHospId"
					></uni-data-select>
					<view class="b mt20">订单运营情况：</view>
					<view
						class="mt20"
						v-if="
							histogramData4.categories &&
							histogramData4.categories.length
						"
					>
						<qiun-data-charts
							:canvas2d="true"
							canvasId="orderStaticToday"
							type="column"
							:opts="opts4"
							:chartData="histogramData4"
						></qiun-data-charts>
					</view>
					<view class="mt20 tc" v-else>
						<view class="df jsc"
							><imageIcon
								:value="noImg"
								width="400rpx"
								height="300rpx"
							></imageIcon
						></view>
						<view>暂无数据</view>
					</view>
					<view class="b mt20">订单收入情况：</view>
					<view
						class="mt20"
						v-if="
							histogramData5.categories &&
							histogramData5.categories.length
						"
					>
						<qiun-data-charts
							:canvas2d="true"
							canvasId="orderIncomeStaticToday"
							type="column"
							:opts="opts5"
							:chartData="histogramData5"
						></qiun-data-charts>
					</view>
					<view class="mt20 tc" v-else>
						<view class="df jsc"
							><imageIcon
								:value="noImg"
								width="400rpx"
								height="300rpx"
							></imageIcon
						></view>
						<view>暂无数据</view>
					</view>
					<view class="b mt20">护工人员情况：</view>
					<view
						class="mt20"
						v-if="
							histogramData6.categories &&
							histogramData6.categories.length
						"
					>
						<qiun-data-charts
							:canvas2d="true"
							canvasId="nursePersonStaticToday"
							type="column"
							:opts="opts6"
							:chartData="histogramData6"
						></qiun-data-charts>
					</view>
					<view class="mt20 tc" v-else>
						<view class="df jsc"
							><imageIcon
								:value="noImg"
								width="400rpx"
								height="300rpx"
							></imageIcon
						></view>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="pt20 flex-center"
					><button
						class="primary-button linear w60 bt30 abs"
						@tap="complete"
					>
						关闭
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const dayjs = require('@/common/dayjs.min.js')
import imageIcon from '@/subPackagesLog/pages/workLog/components/imageIcon.vue'
import noImg from '../icon/empty.png'
export default {
	options: {
		styleIsolation: 'shared',
	},
	emits: ['update'],
	props: {
		titleIndex: {
			type: Number,
			default: 1,
		},
		reportType: {
			type: [Number, String],
			default: 1,
		},
		staticStart: {
			type: String,
			default: '',
		},
		staticEnd: {
			type: String,
			default: '',
		},
		showHosp: {
			type: Boolean,
			default: true,
		},
	},
	components: {
		imageIcon,
	},
	data() {
		return {
			noImg,
			nowDate: '',
			dataList: [],
			hospitalList: [],
			chooseHospId: 0,
			histogramData1: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '订单运营情况',
						data: [],
					},
				],
			},
			histogramData2: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '订单收入情况（元）',
						data: [],
					},
				],
			},
			histogramData3: {
				categories: [],
				series: [
					{
						name: '护工人员情况',
						data: [],
					},
				],
			},
			opts1: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			opts2: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			opts3: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			monthEndDate: '',
			histogramData4: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '订单运营情况',
						data: [],
					},
				],
			},
			opts4: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			opts5: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			opts6: {
				color: [
					'#1890FF',
					'#91CB74',
					'#FAC858',
					'#EE6666',
					'#73C0DE',
					'#3CA272',
					'#FC8452',
					'#9A60B4',
					'#ea7ccc',
				],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true,
				},
				yAxis: {
					data: [
						{
							min: 0,
						},
					],
					splitNumber: 5,
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
					},
				},
			},
			histogramData5: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '订单收入情况',
						data: [],
					},
				],
			},
			histogramData6: {
				//柱状图Compent  //label应为series value 应为
				categories: [],
				series: [
					{
						name: '护工人员情况',
						data: [],
					},
				],
			},
			choosTodayeHospId: 0,
			showMoreIco:
				'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/6m9iijg4abbda2mrhpwqdtfqz.png?timestamp=1689317697000',
		}
	},
	mounted() {
		this.nowDate = dayjs().format('MM') + '月' + dayjs().format('DD') + '日'
		this.monthEndDate = dayjs().endOf('month').format('DD')
	},
	computed: {
		nowDateStr() {
			const { reportType } = this
			return reportType === 1
				? '今日'
				: reportType === 2
				? '本周'
				: '本月'
		},
		periodStr() {
			const { reportType } = this
			return reportType === 1
				? '18点-今日18点'
				: reportType === 2
				? '前一周的周日的18点-本周的周日18点'
				: '前一月的最后一天的18点-本月的最后一天18点'
		},
		staticNoneStr() {
			const { reportType, monthEndDate } = this
			return reportType === 1
				? '数据持续统计中，请到 18 点以后再来查看吧'
				: reportType === 2
				? '数据持续统计中，请到周日下午 18 点以后再来查看吧'
				: '数据持续统计中，请到' +
				  monthEndDate +
				  ' 号下午 18 点以后再来查看吧'
		},
	},
	methods: {
		chooseTodayHospital(val) {
			this.choosTodayeHospId = val
			this.openToDayStatic()
		},
		openToDayStatic() {
			this.$refs.popupDialog.open('center')
			this.queryTodayOrderDistribution()
		},
		//获取实时数据
		queryTodayOrderDistribution() {
			let that = this
			const { choosTodayeHospId, reportType } = this
			this.$request
				.request(
					'carer-platform/snapshot/queryTodayOrderDistribution',
					{
						method: 'post',
						data: {
							hospitalId:
								choosTodayeHospId === 0
									? ''
									: choosTodayeHospId,
							reportType: reportType,
						},
					}
				)
				.then((res) => {
					if (res.success) {
						let data = res.data
						data.map((item) => {
							if (item.hospitalId === choosTodayeHospId) {
								that.$nextTick(() => {
									that.setTodayStaticData(item)
								})
							}
						})
					}
				})
		},
		//数据赋值
		setTodayStaticData(data) {
			this.histogramData4.categories = []
			this.histogramData4.series[0].data = []
			if (
				data.orderDistributionDTOList &&
				data.orderDistributionDTOList.length
			) {
				this.histogramData4.categories =
					data.orderDistributionDTOList.map((item) => {
						return item.key
					})
				this.histogramData4.series[0].data =
					data.orderDistributionDTOList.map((item) => {
						return item.value
					})
				let maxNum = Math.max.apply(
					null,
					this.histogramData4.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts4.yAxis.data[0].max = maxNum
					this.opts4.yAxis.splitNumber = maxNum
				} else {
					this.opts4.yAxis.data[0].max = null
					this.opts4.yAxis.splitNumber = 5
				}
			}
			this.histogramData5.categories = []
			this.histogramData5.series[0].data = []
			if (data.orderIncomeDTOList && data.orderIncomeDTOList.length) {
				this.histogramData5.categories = data.orderIncomeDTOList.map(
					(item) => {
						return item.key
					}
				)
				this.histogramData5.series[0].data =
					data.orderIncomeDTOList.map((item) => {
						return item.value
					})
				let maxNum = Math.max.apply(
					null,
					this.histogramData5.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts5.yAxis.data[0].max = maxNum
					this.opts5.yAxis.splitNumber = maxNum
				} else {
					this.opts5.yAxis.data[0].max = null
					this.opts5.yAxis.splitNumber = 5
				}
			}
			this.histogramData6.categories = []
			this.histogramData6.series[0].data = []
			if (data.nurseCountList && data.nurseCountList.length) {
				this.histogramData6.categories = data.nurseCountList.map(
					(item) => {
						return item.key
					}
				)
				this.histogramData6.series[0].data = data.nurseCountList.map(
					(item) => {
						return item.value
					}
				)
				let maxNum = Math.max.apply(
					null,
					this.histogramData6.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts6.yAxis.data[0].max = maxNum
					this.opts6.yAxis.splitNumber = maxNum
				} else {
					this.opts6.yAxis.data[0].max = null
					this.opts6.yAxis.splitNumber = 5
				}
			}
		},
		complete() {
			this.$refs.popupDialog.close()
		},
		//选择医院
		chooseHospital(val) {
			this.chooseHospId = val
			if (this.dataList && this.dataList.length) {
				let dataInfo =
					this.dataList.find((res) => res.hospitalId === val) || {}
				this.$nextTick(() => {
					this.setStaticData(dataInfo)
				})
			}
		},

		//数据赋值
		setStaticData(data) {
			this.histogramData1.categories = []
			this.histogramData1.series[0].data = []
			if (
				data.orderDistributionDTOList &&
				data.orderDistributionDTOList.length
			) {
				this.histogramData1.categories =
					data.orderDistributionDTOList.map((item) => {
						return item.key
					})
				this.histogramData1.series[0].data =
					data.orderDistributionDTOList.map((item) => {
						return item.value
					})
				let maxNum = Math.max.apply(
					null,
					this.histogramData1.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts1.yAxis.data[0].max = maxNum
					this.opts1.yAxis.splitNumber = maxNum
				} else {
					this.opts1.yAxis.data[0].max = null
					this.opts1.yAxis.splitNumber = 5
				}
			}
			this.histogramData2.categories = []
			this.histogramData2.series[0].data = []
			if (data.orderIncomeDTOList && data.orderIncomeDTOList.length) {
				this.histogramData2.categories = data.orderIncomeDTOList.map(
					(item) => {
						return item.key
					}
				)
				this.histogramData2.series[0].data =
					data.orderIncomeDTOList.map((item) => {
						return item.value
					})
				let maxNum = Math.max.apply(
					null,
					this.histogramData2.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts2.yAxis.data[0].max = maxNum
					this.opts2.yAxis.splitNumber = maxNum
				} else {
					this.opts2.yAxis.data[0].max = null
					this.opts2.yAxis.splitNumber = 5
				}
			}
			this.histogramData3.categories = []
			this.histogramData3.series[0].data = []
			if (data.nurseCountList && data.nurseCountList.length) {
				this.histogramData3.categories = data.nurseCountList.map(
					(item) => {
						return item.key
					}
				)
				this.histogramData3.series[0].data = data.nurseCountList.map(
					(item) => {
						return item.value
					}
				)
				let maxNum = Math.max.apply(
					null,
					this.histogramData3.series[0].data
				)
				if (maxNum < 5 || (maxNum % 5 > 0 && maxNum < 10)) {
					this.opts3.yAxis.data[0].max = maxNum
					this.opts3.yAxis.splitNumber = maxNum
				} else {
					this.opts3.yAxis.data[0].max = null
					this.opts3.yAxis.splitNumber = 5
				}
			}
		},

		//订单运营情况
		queryOrderDistribution() {
			let _that = this
			this.$request
				.request('carer-platform/snapshot/queryOrderDistribution', {
					method: 'post',
					data: {
						reportType: this.reportType,
						reportStartDate: this.staticStart || '',
						reportEndDate: this.staticEnd || '',
					},
				})
				.then((res) => {
					if (res.success) {
						let data = res.data
						_that.dataList = data
						if (data && data.length) {
							_that.hospitalList = data.map((item) => {
								return {
									value: item.hospitalId,
									text: item.hospitalShortName
										? item.hospitalShortName
										: item.hospitalName,
								}
							})
							data.forEach((row) => {
								if (!row.hospitalId) {
									_that.$nextTick(() => {
										_that.setStaticData(row)
									})
								}
							})
							_that.$emit('update', JSON.stringify(data))
						} else {
							_that.$emit('update', '')
						}
					}
				})
		},
	},
	watch: {
		// reportType(val) {
		// 	if (val) {
		// 		setTimeout(() => {
		// 			this.queryOrderDistribution()
		// 		}, 300)
		// 	}
		// },
		staticStart(val) {
			this.queryOrderDistribution()
		},
	},
}
</script>

<style scoped>
/deep/.uni-select__selector-item {
	font-size: 32rpx;
}
.query-data {
	width: 260rpx;
	height: 70rpx;
}
.w420 {
	width: 420rpx;
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
.popup-bd {
	width: 700rpx;
	/* max-height: 694rpx; */
	border-radius: 20rpx;
}
.popup-content {
	/* 	height: 880rpx;
	overflow-y: scroll; */
	overflow: auto;
}
.bt30 {
	bottom: 30rpx;
}
/deep/ .w420 .uni-select__input-text {
	width: 360rpx !important;
}
</style>
